<template>
  <div class="order-bottom">
    <el-divider></el-divider>
    <div>
      <el-row>
        <el-col :span="8">
          <span style="color: #409EFF; font-size: 35px">¥：{{form.amount}}</span>
        </el-col>
        <el-col :span="13">
          <span>共：{{form.total}} 个</span>
          <br />
          <span>支付方式：支付宝</span>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="toPay">结 算</el-button>
        </el-col>
      </el-row>
    </div>
    <el-divider></el-divider>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleClose(done) {
      done();
    },
    async toPay() {
      await this.$http
        .post(`/ttOrder/ali-pay`, this.form.orderId)
        .then((response) => {
          let pay = JSON.parse(response.data.message);
          if (pay.success) {
            window.open(pay.payUrl);
          } else {
            this.$message({ message: pay.erroMsg, type: "warning" });
          }
        });
    },
  },
  props: {
    form: {
      amount: 0,
      total: 0,
      orderId: [],
    },
  },
};
</script>

<style>
.order-bottom {
  position: fixed;
  bottom: 0px;
  width: auto;
  white-space: nowrap;
  background: white;
  z-index: 1;
}
</style>
